<template>
    <div class="systemTask-node">
        <div class="node-text">
            <span>{{ customNodeName }}</span>                                   
        </div>
        <div class="node-icon">
            <svg-icon name='bpm-system' width="18" height="18" color="#fff"/> 
        </div>
    </div>
</template>
  
<script setup lang="ts">
// 定义组件的属性
import { EventType } from '@logicflow/core'
import { vueNodesMap } from '@logicflow/vue-node-registry'

// 注入 getNode 和 getGraph
const getNode = inject<() => any>('getNode');
const getGraph = inject<() => any>('getGraph');
const customNodeName = ref();
let eventCenter:any;
onMounted(() => {
    if (getNode && getGraph) {
        const node = getNode()
        const graph = getGraph()
        eventCenter = graph.eventCenter
        customNodeName.value = node.properties.customNodeName
        eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData: any) => {            
            const keys = eventData.keys as string[]
            const content = vueNodesMap[node.type]            
            if (content && eventData.id === node.id) {
                const { effect } = content                
                if (!effect || keys.some((key) => effect.includes(key))) {                    
                    customNodeName.value = eventData.properties?.customNodeName || ''
                }
            }
        })
    }
})
// 在组件销毁时取消事件监听
onBeforeUnmount(() => {
    if (eventCenter) {
        eventCenter.off(EventType.NODE_PROPERTIES_CHANGE);
    }
});
</script>
  
<style scoped lang="scss">
.systemTask-node {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 150px;
    height: 90px;    
    border-radius: 8px;
    background: linear-gradient(90deg,rgb(73,164,228) , rgb(113,190,237));
    // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);    
    overflow: hidden;
}

.node-text {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 60px;
    margin-top: 8px;
        
    span{        
        font-weight: bold;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
    }
}
.node-icon{
    position: absolute;
    top: 5px;
    left: 5px;
}

</style>